﻿<div id="vs-projects">
    <style>
        header {
            border-bottom: 1px solid rgb(11, 90, 98);
        }
            header h1 {
                color: white;
                font-size: 22px;
                font-family: "Segoe UI","Arial",sans-serif;
            }

        .course {
            margin-top: 5px;
            height: 120px;
            background-color: rgba(11, 90, 98, 0.4);
            padding: 5px;
            cursor: pointer;
        }

        .course:hover {
            background-color: rgba(11,90,98,0.8);
        }

        .course-main {
            display: inline-block;
            width: 220px;
            height: 100%;
            background-color: black;
            line-height: 120px;
            position: relative;
        }

            .course-main h1, .lec-main h1 {
                color: gray;
                text-align: center;
                display: inline-block;
                vertical-align: middle;
                line-height: normal;
                max-height: 70px;
                overflow: hidden;
                font-size: 20px;
            }

            .course-main div {
                width: 40px;
                height: 40px;
                position: absolute;
                left: -1px;
                top: -1px;
            }

        .level-beginner {
            background-image: url(Resources/Images/Levels/L-Beginner-img.png);
            background-size: contain;
        }

        .level-intermediate {
            background-image: url(Resources/Images/Levels/L-Intermediate-img.png);
        }

        .level-advanced {
            background-image: url(Resources/Images/Levels/L-advanced-img.png);
        }

        .level-expert {
            background-image: url(Resources/Images/Levels/L-expert-img.png);
        }

        .info-holder {
            display: inline-block;
            vertical-align: top;
        }

            .info-holder p {
                display: inline;
                color: white;
                font-size: 18px;
                padding: 2px;
                line-height: 23px;
                font-family: "Segoe UI","Arial",sans-serif;
            }

            .info-holder p:nth-child(2n) {
                font-weight: 800;
            }

        .summary-holder {
            position: absolute;
            right: 10px;
            width: 53%;
            display: inline-block;
            text-align: right;
            vertical-align: top;
            font-family: "Segoe UI","Arial",sans-serif;
            color: white;
        }

        .summary-holder p {
            overflow: hidden;
            height: 110px;
        }

        .lecture {
            margin-top: 5px;
            height: 115px;
            border-top: 1px solid rgb(11, 90, 98);
            border-bottom: 1px solid rgb(11, 90, 98);
            display: inline-block;
            margin-right: auto;
        }

        .lec-leftPart {
            display: inline-block;
        }

        .lec-summary-holder {
            display:inline-block;
            max-width: 480px;
            max-height: 65px;
            text-align: left;
            vertical-align: top;
            font-family: "Segoe UI","Arial",sans-serif;
            color: white;
            padding-left: 10px;
            padding-top: 5px;
        }

        .lec-btn-holder {
            padding-left: 8px;
            padding-top:5px;
        }

        .button {
            width: 100px;
            height: 30px;
            border: 1px solid white;
            display: inline-block;
            margin: 2px;
        }

        .btn-video {
            background-image: url(../Resources/Images/Backgrounds/btn-video-bg.png);
        }

            .btn-video:hover {
                border: 1px solid rgb(1,58,102);
            }

        .btn-presentation {
            background-image: url(../Resources/Images/Backgrounds/btn-ppp-bg.png);
        }

            .btn-presentation:hover {
                border: 1px solid rgb(127,13,13);
            }

        .btn-materials {
            background-image: url(../Resources/Images/Backgrounds/btn-materials-bg.png);
        }

            .btn-materials:hover {
                border: 1px solid rgb(55,78,1);
            }

        .lec-main {
            display: inline-block;
            width: 200px;
            height: 105px;
            line-height: 105px;
            background-color: black;
            margin-top:5px;
            margin-left: 10px;
            vertical-align: top;
            overflow: hidden;
            position: relative;
            color: white;
        }

            .lec-main h1 {
                font-size: 18px !important;
            }
        
    </style>

    <header>
        <h1 id="courses-header">Courses</h1>
    </header>

    <div class="course-holder">
        <article class="course">
            <div class="course-main">
                <div class="level-beginner">
                </div>
                <h1>Introduction to Programming with C# More text and more text</h1>
            </div>
            <div class="info-holder">
                <div>
                    <p>Начална дата:</p>
                    <p class="start-date">19.22.2013</p>
                </div>
                <div>
                    <p>Крайна дата:</p>
                    <p class="end-date">21.22.2013</p>
                </div>
                <div>
                    <p>Лекции на седмица:</p>
                    <p class="num-lectures">3</p>
                </div>
                <div>
                    <p>Място:</p>
                    <p class="place">РУ - 1.403А</p>
                </div>
                <div>
                    <p>Час:</p>
                    <p class="hour">17:30ч</p>
                </div>

            </div>
            <div class="summary-holder">
                <p>
                    Курсът основи на програмирането със C# ще ни запознае с най-основните неща в програмирането.
                    Ще се разгледат типове данни, променливи, оператори и др. Ще се научим да пишем прости програми,
                    да четем и пишем по конзолата, да работим с текстови файлове, бройни системи и други.
                    [aoudhask jdaks hdak; jsdpa suhdak pshd pasueh pasjdapsu eh;ask jhdipaush dkaj epaush adjh
                    ajsdash da;s hda;s jhdask hdap sdha ;sdh a;skjdh ak;sjdh ]
                </p>
            </div>
        </article>

        <div class="lec-holder">

            <article class="lecture">
                <div class="lec-leftPart">
                    <div class="lec-summary-holder">
                        <p>
                            В тази лекция ще се споменат .NET, C#, Visual Studio 2010/2013.
                        </p>
                        <p>
                            Кратко въведение в алгоритми.
                        </p>
                        <p>
                            Примитивни типове данни и оператори.
                        </p>
                    </div>

                    <div class="lec-btn-holder">
                        <a href="#" class="btn-video button" title="Video"></a>
                        <a href="#" class="btn-presentation button" title="Presentation"></a>
                        <a href="#" class="btn-materials button" title="Materials"></a>
                    </div>
                </div>
                <div class="lec-main">
                    <h1>Примитивни типове данни и алгоритми и още няколко неща</h1>
                </div>
            </article>

        </div>
    </div>

    <article class="course">
        <div class="course-main">
            <div class="level-expert">
            </div>
            <h1>Introduction to Programming with C# More text and more text</h1>
        </div>
        <div class="info-holder">
            <div>
                <p>Начална дата:</p>
                <p class="start-date">19.22.2013</p>
            </div>
            <div>
                <p>Крайна дата:</p>
                <p class="end-date">21.22.2013</p>
            </div>
            <div>
                <p>Лекции на седмица:</p>
                <p class="num-lectures">3</p>
            </div>
            <div>
                <p>Място:</p>
                <p class="place">РУ - 1.403А</p>
            </div>
            <div>
                <p>Час:</p>
                <p class="hour">17:30ч</p>
            </div>

        </div>
        <div class="summary-holder">
            <p>
                Курсът основи на програмирането със C# ще ни запознае с най-основните неща в програмирането.
                Ще се разгледат типове данни, променливи, оператори и др. Ще се научим да пишем прости програми,
                да четем и пишем по конзолата, да работим с текстови файлове, бройни системи и други.
            </p>
        </div>
    </article>
</div>